/*
 * @Description: 卡冻结模块
 * @Author: yingying.fan
 * @Date: 2019-03-29 10:57:27
 * @Last Modified by: yingying.fan
 * @Last Modified time: 2019-03-29 11:06:41
 */
<template>
  <div class="card-module-wrapper">
    <!-- 卡图标 -->
    <img
      :src="cardInfo.icon"
      class="card-icon"
    >
    <!-- 卡名称 -->
    <div
      class="card-name"
      @click="goToCardDetail"
    >
      <span>{{cardInfo.name}}</span>
      <i class="iconfont icon-rightangel"></i>
    </div>
    <div class="frozen-desc-wrapper">
      <img src="../../assets/frozen.png">
      <p>已冻结</p>
    </div>
  </div>
</template>

<script>
import BaseCardModule from './BaseCardModule'
import { open } from '../../../../utils/JumpUtils.js'
export default {
  name: 'CardFrozenModule',
  extends: BaseCardModule,
  components: {

  },
  data() {
    return {

    }
  },
  methods: {
    goToCardDetail() {
      localStorage.setItem('CARD_DETAIL_INFO', JSON.stringify(this.cardInfo))
      open('carddetail.html')
    }
  }
}
</script>

<style>
.card-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
}
.card-name {
  height: 50px;
  color: #333333;
  margin-top: 20px;
  font-weight: bold;
  font-size: 36px; /*px*/
}
.card-name > * {
  vertical-align: middle;
}
.card-name > i {
  margin-left: 6px;
  font-size: 20px;
}
.frozen-desc-wrapper {
  position: relative;
  height: 400px;
  margin: 110px auto 0 auto;
}
.frozen-desc-wrapper > img {
  width: 400px;
  height: 400px;
}
.frozen-desc-wrapper > p {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 35px;
  color: #648df6;
  font-size: 36px; /*px*/
}
</style>
